<template>
    <div class="app-body">
        <div class="nav" id="wrapper">
            <div id="scroller">
                <ul >
                    <li v-bind:class="{ 'active':isActive }" v-on:click="onNavClick($event,0)">
                        <span>全部</span>
                    </li>
                    <li v-for="item in categories" :ref="'nav-item'+item.id" :data-id="item.id" v-bind:class="{'active':item.active}" v-on:click="onNavClick($event,item.id)">
                        <span>{{item.name}}</span>
                    </li>
                </ul>
            </div>

        </div>
        <div class="banner">
            <img class="sg-img-responsive" :src="banner.cover">
        </div>
        <div class="goods-list">
            <ul>
                <li v-for="item in goodsList">
                    <router-link :to="{path:'/detail/'+item.id}">
                        <div class="img">
                            <img class="sg-img-responsive" :src="item.cover"/>
                        </div>
                        <div class="info">
                            <p class="name">{{item.name}}</p>
                            <div style="position: absolute;bottom: 0;width: 100%;height: 1.5rem;">
                                <span v-if="item.coupon_status > 0" class="original-price">￥{{item.price}}</span>
                                <span class="price" v-bind:class="{priceLeft:item.coupon_status==1 ? false:true}">￥{{item.coupon_price}}</span>
                                <img v-if="item.coupon_status > 0" style="position: absolute;right: 1rem;width: 2.5rem;bottom: 1rem" src="images/coupon_price.png">
                            </div>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
        <div class="more">
            <a class="get-more" v-on:click="next()" >{{moreText}}</a>
        </div>
    </div>
</template>
<script>
    import IScroll from 'iscroll';
    export default {
        data(){
            return {
                categoryId:this.$route.params.categoryId,
                subId:0,
                categories:[],
                goodsList:[],
                navWidth:0,
                isActive:true,
                banner:{},
                nextPage:'',
                moreText:'加载更多......'
            }
        },
        mounted(){
           this.getCategories();
           this.getBanner();
           this.getGoodsList(this.categoryId,0);
            document.setTitle('分类');
        },
        methods:{
            getCategories(){
                let that                    =   this;
                this.api.get('api/category/children/'+that.categoryId,).then(function(response){
                    if(response.status==200){
                        for(var i in response.data) {

                            that.navWidth=(response.data.length+1)*3.5*10;
                            that.navWidth=that.navWidth+'px;'
                            if(that.categoryId==response.data[i].id){
                                response.data[i].active=true;
                            }else {
                                response.data[i].active=false;
                            }
                            if(that.subId!=0){
                                that.isActive=false;
                            }
                            that.categories.push(response.data[i]);
                        }
                        var myScroll = new IScroll('#wrapper', {
                            mouseWheel: true,
                            scrollX: true,
                            scrollY: false,
                        });
                        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, that.isPassive() ? {
                            capture: false,
                            passive: false
                        } : false);
                    }
                });
            },
            getBanner(){
                let that                    =   this;
                this.api.get('api/ad/category',{params:{id:that.categoryId}}).then(function(response){
                    if(response.status==200){
                        that.banner=response.data;
                    }
                });
            },
            isPassive() {
                var supportsPassiveOption = false;
                try {
                    addEventListener("test", null, Object.defineProperty({}, 'passive', {
                        get: function () {
                            supportsPassiveOption = true;
                        }
                    }));
                } catch(e) {}
                return supportsPassiveOption;
            },
            getGoodsList(){
                let that                    =   this;
                this.api.get('api/category/goods',{params:{size:10,id:this.categoryId,sub_id:this.subId}}).then(function(response){
                    that.goodsList.splice(0,that.goodsList.length);
                    if(response.status==200){
                        for(var i in response.data.data) {

                            that.goodsList.push(response.data.data[i]);
                        }
                        that.nextPage           =   response.data.next_page_url;
                        if(that.nextPage==null){
                            that.moreText       =   '已经扯到底了!';
                        }else {
                            this.moreText       =   '加载更多......';
                        }
                    }
                });
            },
            next:function() {
                if(this.nextPage){
                    let that                    =   this;
                    this.api.get(this.nextPage,{params:{size:10,id:this.categoryId,sub_id:this.subId}}).then(function(response){
                        if(response.status==200){
                            for(var i in response.data.data) {
                                that.goodsList.push(response.data.data[i]);
                            }
                            that.nextPage           =   response.data.next_page_url;
                            if(that.nextPage==null){
                                that.moreText       =   '已经扯到底了!';
                            }else {
                                this.moreText       =   '加载更多......';
                            }
                        }
                    });
                }
            },
            onNavClick:function (event,subId) {
                if(subId==0){
                    this.isActive                   =   true;
                }else {
                    this.isActive                   =   false;
                }
                for (let i=0;i<this.categories.length;i++){
                    if(this.categories[i].id==subId){
                        this.categories[i].active= true;
                    }else {
                        this.categories[i].active =false;
                    }
                }
                this.subId                          =   subId;
                this.getGoodsList();
            }
        }
    }
</script>